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> Plan a table 

> Create a simple table 

> Span rows 

> Format borders 

>» Modify table backgrounds 
» Change table dimensions 
> Align table contents 

> Position page elements 


Although paragraphs are a useful way to present most information on a 
Web page, certain contents require other formats. HTML includes 
extensive support for one of the most common alternate layouts: the 
table, which allows you to present information in a grid. A table is use- 
ful for creating a compact list of the traits or attributes of all the items in 
а set. Vm» Jaime Chavez works in the Information Systems depart- 
ment at Nomad Ltd, a travel and sporting goods company. His current 
project is to add information to the company Web site about each of the 
tours that Nomad Ltd offers. Tour information formatted with a table 
allows Web page users to easily compare different aspects of each tour. 


HTML 


У 


Planning a Table 


A table is a useful way to summarize many types of data, including results from a database search 
or the differences among a fixed set of choices. As shown in Figure E-1, table data is organized 
into rows and columns; a row is a single horizontal line of data, while a column is a single verti- 
cal line of data. The intersection of a row and a column is a single unit of table data, called a cell. 
While all Web page tables use a standard layout, many other aspects of tables are customizable. 
You can tailor tables to fit the data they contain, as well as tailor the designs of the Web pages 
where the tables are located. @fiæ» As he prepares to create the table for the Nomad Ltd tours 
Web page, Jaime plans his table layout. HTML allows you to control many aspects of a table's 
appearance. Those characteristics are shown in Figure E-2, and include: 


Structure and border 

You can customize a table to include exactly the number of columns and rows that your data 
requires. You also can modify a table's structure so that one or more cells are part of multiple 
rows or columns. By default, each cell is slightly separated from the cells that surround it. To 
make the boundaries between cells clearer, you can add cell borders to a table. HTML allows you 
to customize border color and thickness. 


Alignment 

Just as with standard Web page elements or paragraphs of text, you can align cell contents 
along the cell's right or left edges, or centered between the two edges. Additionally, you can 
set the vertical alignment flush with the top border or the bottom border, or centered 
between the two borders. 


Background 

By default, a Web page table is transparent, showing the same background image or color as the 
Web page. However, tables can accommodate a custom background color, which you can apply 
to the entire table, specific rows, or individual cells. 


Dimensions 

In addition to customizing the number of rows and columns in the table structure, you can 
specify the sizes of table elements, as well as different aspects of the spacing between them. You 
can set the entire table to a fixed width or height, or you can specify that the browser automati- 
cally resize it to a specific percentage of the window size. You also can set the amount of blank 
space around the contents of each cell, as well as the distance between each cell. 


Positioning 

Because tables are so flexible and customizable, Web designers have found many uses for them. 
One of the most common uses of tables is to position page elements in specific locations on the 
page. You cannot create this type of layout solely with HTML tags such as «P» and «IMG». 


FIGURE E-1: Table components 
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Cell Row 


FIGURE E-2: Customizable table characteristics 
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HTML 


To ensure that you select all 
the text in the file, you can 
click Edit, then click Select All. 


Creating a Simple 
Table 


While a table is a compact way to show relationships between information, each separate unit of 
information requires a separate HTML code. As a result, the code to create even a simple table is 
longer that most other basic HTML, and can include several nested layers of tags. The main tag 
pair for creating a table is <TABLE>..</TABLE>. Between these tags, you add codes for each row 
using <TR>, which is short for “table row,” and for each cell using <TD>, which is short for “table 
data.” The cells in the first row of most tables use an additional tag: «TH», which is short for 
“table header.” «TH» formats the contents of a cell as centered and boldface, making the column 
headings stand out from the contents of the cells below them. You also can add a table caption, 
which is centered above the table by default, using the «CAPTION»..«/CAPTION? tag pair. 
However, when a table is the only element on a Web page, a large heading is usually a better choice 
for labeling the table contents. Table E-1 summarizes the HTML tags used to create a table. 
Qa. Jaime has created a Web page for Nomad Ltd tours information, and has received a text 
file from the marketing department. The file contains the contents of a table that describes the 
tours. He copies the table text into his Web page and formats it with the HTML table tags. 


1. Start your text editor, then open the file HTM E-1.txt 


This file contains the tours table text that Jaime received from the marketing department, 
along with link tags that he added to each of the tour names. 


2. Select all the text in the file, press [Ctrl][C] to copy it to the Clipboard, then close the 


file, if necessary 


3. Open the file HTM E-2.htm in your text editor, then save it as a text document with the 


filename nomad-e.htm 
This document contains headings and the Nomad Ltd logo. 


4. Click the blank line below the text formatted with «H1», press [Enter], type <TABLE 
BORDER», press [Enter], press [СГМ] to paste the table text from the Clipboard, 


press [Enter], type </TABLE>, then press [Enter] 
The BORDER attribute in the «TABLE» tag creates dividing lines between the cells. 


5. Click at the end of the opening «TABLE» tag, press [Enter], press [Spacebar] twice, 
then type <TR> 


«TR» marks the start of a row. 


6. Click to the left of the text Tour Name, press [Spacebar] four times, type «TH», then 


repeat this step for the two lines of text that follow 
«TH» marks the text that follows it as the contents of a cell, and applies the header format. 


1. Click the blank line below the last «TH» tag you added, press [Spacebar] twice, type 
</TR>, then press [Enter] twice 


8. Add a <TR> tag indented two spaces, indent the three items that follow with four spaces 
and add the <TD> tag before each one, add the closing </TR> tag indented two spaces, 


then repeat this step for the remaining groups of cells 
Your Web document should resemble the one shown in Figure E-3. 


9. Save your work, start your Web browser, cancel any dial-up activities, then open the 


file nomad-e.htm 
The data appears in a table of three columns and seven rows, as shown in Figure E-4. 


FIGURE E-3: Web document containing basic table tags 


IHSPACE="20" ALT="“Nomad Ltd"» 
KH2>A guide to</H2> 
<H1>Nomad Ltd Tours</H1> 


<TABLE BORDER> 


<TR> 
XTHATour Name 
<TH>hength 
<TH>Theme 
</TR> 
<TR> 
<TD><A EF=“construction.htm">Soccer Safari«/R» 
<TD>15 days 
XTD»SocceM clinics and matches 
</TR> <TD>Famous operahouses 
<TR> </TR> 
<TD><A HREFzAconstruction.htm"»Basking in Baseball</A> <TR> 
<TD>9 days 23 <TD><A HREF="construction.htm">Theater Troupe</A> 
<TD>Baseball tkaining camps <TD>9 days 
</TR> <TD>Country theater festivals 
<TR> </TR> 
<TD><A HREF="construction. htm" >Viva Voce</A> <TR> 
<Т0>15 days <TD><A HREF="construction.htm">Country Escape</A> 
<TD>Famous operaho <TD> days 
<TD>Retreats in the countryside 
</TR> 
Opening and es 
closing <TD><A HREF-"construction.htm"»Urban Oases</A> 
<TD>10 days 
<TABLE> tags <TD>Resorts in major cities 
</TR> 
К /TABLE> 


KH5»updated August 24, 2002</H5> 


K/FONT» 
K/BODV» 
</HTML> 


FIGURE E-4: Web page containing table 


Heading row Nomad Ltd Tours 
text boldface E Tour Name Length Theme | 
and centered 


Soccer Safari 15 days Soccer clinics and matches 
Basking in Baseball 9 days [Baseball training camps | 
Viva Voce 15 days |Famous opera houses 
BORDER attribute ——‘Theater Troupe 9 days (Country theater festivals 
adds borders Country Escape 8 days Retreats in the countryside 
around all cells Urban Oases 10 days Resorts in major cities 


updated August 24, 2002 


TABLE E-1: HTML table tags 


tag(s) | function 


«TH» marks contents that follow as a table 
cell, and applies header format 


<TD> marks contents that follow as a standard 
table cell 
<CAPTION>..</CAPTION> formats text to appear as a caption, centered 


above the table; can appear anywhere within the 
<TABLE>..</TABLE> tag pair 
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ү, Spanning Rows 


A basic table contains cells of data arranged in columns and rows. However, sometimes the con- 
HTML tents of a cell apply to more than one row or column. You can mark a single cell to be part of 
EM multiple rows or columns—known as spanning—by using attributes in the «TH» or <TD> 
tags. Table E-2 explains these attributes, ROWSPAN and COLSPAN. (aes Nomad Ltd tours 
are divided into three categories: athlete, arts, and leisure. Jaime wants to add a table column that 
shows the category of each tour. Since two of the tours belong to each category, each category cell 

will span two rows. 


1. In your text editor, click to the right of the «TR» tag for the column heading section, 


press [Enter], press [Spacebar] four times, then type <TH>Tour Category 
This code adds the header cell for the new column. 


2. Click to the right of the <TR> tag above the text Soccer Safari, press [Enter], press 
[Spacebar] four times, then type <TD ROWSPAN="2"><IMG SRC="images/ 
athlete.gif" WIDTH="203" HEIGHT="116" ALT="athlete"> 


This code adds the tour category cell that aligns with the first two rows of data. Instead of 
text, Jaime uses an <IMG> tag as the cell contents. The tag references a logo graphic for the 
athlete tours. Jaime received the graphic from the marketing department. 


3. Click to the right of the «TR» tag above the text Viva Voce, press [Enter], press 


[Spacebar] four times, then type «TD ROWSPANZ"2"» «IMG SRC="images/arts.gif" 
WIDTH="202" HEIGHT="121" ALT="Arts"> 


4. Click to the right of the «TR» tag above the text Country Escape, press [Enter], press 
[Spacebar] four times, then type <TD ROWSPAN="2"><IMG SRC="images/leisure.gif" 
WIDTH="197" HEIGHT="124" ALT="Leisure"> 


Your Web document should resemble the one shown in Figure E-6. 


5. Save your file nomad-e.htm as a text document 


6. Click the browser program button on the taskbar, then reload nomad-e.htm 
As shown in Figure E-7, each graphic logo for the three tour types appears in a cell in the new 
column on the left edge of the table. Each cell spans two rows. 


Average Temperatures for Selected World Cities 


City January July Pi 
E Minimum (^F) Maximum (^F) Minimum (°F) Maximum (°F) | 
Accra, Ghana 87 73 81 73 ЫН 
Amsterdam, Netherlands 40 34 69 59 
Athens, Greece 54 42 90 72 
Auckland, New Zealand 73 60 56 46 
Baghdad, Iraq 60 39 110 76 


FIGURE E-6: Web document containing code for cells spanning rows e 
<H1>Nomad Ltd Tours</H1> 
<TABLE BORDER> 
<TR> 
<TH>Tour Category M Code for header cell for 
<TH>Tour Name new column 
<TH>Length 
<TH>Theme 
</TR> 
<TR> 
<TD ROWSPAN="2"><IMG SRC-"images/athlete.gif" WIDTH="203" HEIGHT="116" 
ALT="“athleta™> 
<TD><A HREF="construction.htm">Soccer Safari</A> 
<TD>15 days 
<TD>Soccer\clinics and matches 
</TR> 
<TR> 
<TD><A HREF="“Qonstruction. htm" >Basking in Baseball</A> 
<TD>9 days 
<TD>Baseball trkining camps 
</TR> ALT="“arts"> 
<TD><A HREF="“construction.htm">Viva Uoce</A> 
<TR> <TD>15 days 
<TD ROWSPAN="2" SRC-:"images/arts.gif" WIDTH} <TD>Famous operahouses 
ALT="Arts"> </TR> 
<TR> 
R <TD><A HREF="construction.htm">Theater Troupe</A> 
Tags for cells in <TD>9 days 
new column use <TD>Country theater festivals 
</TR> 
ROWSPAN 
H <TR> 
attribute <TD ROWSPAN="2"><IMG SRC-"images/leisure.gif" WIDTH="197" HEIGHT="124" 
ALT="Leisure™> 
<TD><A HREF*"construction.htm"»Country Escape</A> 
<TD>8 days 
<TD>Retreats in the countryside 
</TR> 
<TR> 
<TD><A HREF*"construction.htm"»Urban Oases</A> 
<TD>10 days 
<TD>Resorts in major cities 
</TR> 
</TABLE> 
FIGURE E-7: Web page table containing spanned rows 
New column Tour Category Tour Name Length Theme 
added . m 
ATHLETE Soccer Safari 15 days Soccer clinics and matches 
Travel, relax, and play! 
Each new cell Watch and take part A - 
spa ns two rows in various sports. Basking in Baseball |9 days Baseball training camps 
Art S Viva Voce 15 days Famous opera houses 
Experience the world's 
traditional performing 
arts at their sources. Theater Troupe 9 days Country theater festivals 
f £151A re Country Escape 8 days Retreats in the countryside 
Relax and rejuvenate 
on quiet trips to А А ‚. 
secluded retreats. Urban Oases 10 days Resorts in major cities 


TABLE E-2: Spanning attributes 


tag | attribute | description | example 


COLSPAN indicates number of columns the current cell should span «TD COLSPAN="2"> 


ү, Formatting Borders 


Just as you can control the arrangement of cells in a table, you also can alter the properties of the 
HTML borders between cells. By assigning a value in pixels to the BORDER attribute in the <TABLE> 
s tag, you can change the thickness of the table's outside border. This attribute also gives you min- 
imal control over the border around each cell. When the BORDER attribute is present in the 
<TABLE> tag, cell borders appear as lines one pixel wide. However, if BORDER is set equal to 
zero, or if the attribute is not present, cells will not display any borders. Another way to affect the 
relationship between cells is the CELLSPACING attribute, which sets the distance in pixels 
between cell borders. By default, this distance is two pixels; setting it to zero gives the appearance 
of a single-line gridwork dividing cells, while higher number settings increase the blank area on 
all sides of cells. Table E-3 summarizes border attributes. [ Jaime wants to customize the 
look of his table to fit its contents. He starts by formatting the table and cell borders. 


1. In your text editor, click to the right of BORDER in the «TABLE» tag, then type ="5" 


Jaime originally entered the BORDER attribute without a value, which turned on the display 
of cell borders and added a table border with the default value of one pixel. Setting the BOR- 
DER attribute to a larger value allows you to see how the table looks with a thicker border. 


2. Save your work 


3. Click the browser program button on the taskbar, then reload nomad-e.htm 
The table's outside border appears thicker, as shown in Figure E-8. This thickness makes the 
border's three-dimensional effect more noticeable. 


QuickTip 4. Click the text editor program button on the taskbar, select ="5" in the «TABLE» tag, 
Be sure not to delete the then press [Delete] 
BORDER attribute, so the Jaime prefers the small default table border size. 


table still will display the 
table and cell borders. 5. Click to the right of BORDER in the «TABLE» tag, press [Spacebar], then type 


CELLSPACING="0" 
Figure E-9 shows the completed code for the table and cell borders. Setting the CELLSPACING 
attribute equal to zero removes the blank space between the cell borders. 


6. Save your work, click the browser program button on the taskbar, then reload 


nomad-e.htm 
As shown in Figure E-10, the cell and table borders are the same width, and appear as a grid 
of single lines. 


TABLE E-3: Table and cell border attributes 


tag | attribute | description | default value | example 

<TABLE> BORDER adds borders around the table 1 px (if attribute is <TABLE BORDER="5"> 
and each cell; optional value specified without 
determines thickness of a value) 


table border 


CELLSPACING determines gap between 2 px (if attribute is «TABLE CELLSPACING="0"> 
borders of adjacent cells not specified) 


FIGURE E-8: Web page table with 5-pixel border 


Tour Category Tour Name Length Theme 


A JHLETE Soccer Safari 15 days Soccer clinics and matches 


Travel, relax, and play! 
Watch and take part 


in various sports. Basking in Baseball 9 days Baseball training camps 
Outer table 
border thickened 
by BORDER value Arts Viva Voce 15 days Famous operahouses 
Experience the world's 


traditional performing 
arts at their sources. ‘Theater Troupe 9 days Country theater festivals 


Eg £151A re Country Escape 8 days Retreats in the countryside 


Relax and rejuvenate 
on quiet trips to 


secluded retreats. Urban Oases 10 days Resorts in major cities 


FIGURE E-9: Web document containing border formatting 


on eem Ltd Tours</H1> CELLSPACING 
<TABLE BORDER CELLSPACING: "0"> ————————————————————————————————————————— setting removes 


ri 
e bute <TR> empty space 
defaults to <TH>Tour Category 
Loi between 
-pixel table <TH>Tour Name | 
adjacent cells 
border 
FIGURE E-10: Web page table with cellspacing removed 
| Tour Category | Tour Name Length | Theme 
A HLETF 15 days |Soccer clinics and matches 
Travel, relax, and play! 
Watch and take part 2. 2. 
Table border in various sports. Basking in Baseball Baseball training camps 
displays at 
default Arts Viva Voce 15 days |Famous operahouses 
thickness Experience the world's 
traditional performing 
arts at their sources. Theater Troupe 9 days |Country theater festivals 
—— 8. 
А | Space 
Ei е1ѕи ТР. Country Escape 8 days Retreats in the countryside removed 
Relax and rejuvenate between cell 
on quiet trips to . . 2. 
secluded retreats. Urban Oases 10 days Resorts in major cities borders 
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If you previously clicked any 
of the links in the table, the 
link text appears as dark 
gray rather than black. 


1. 


тое Ф 


ү, Modifying Table 
Ww | Backgrounds 


By default, table cells are transparent, and the background color or image for the rest of the Web 
page also appears as the table background. However, you can use the BGCOLOR attribute to 
assign a background color to a cell, a row, or the entire table. Depending on what part of the table 
you want to format, you can add the BGCOLOR attribute to the appropriate tag or tags—«TH», 
<TD>, <TR>, or <TABLE>—and set the attribute’s value to the color’s hexadecimal equivalent. 
As with other Web page elements, it’s important to use table background color sparingly and 
judiciously to enhance your page, rather than overwhelm it. Фб Jaime wants to color-code 
the rows in his table to make it easier to distinguish which tours are part of each category. He has 
looked up hexadecimal equivalents for subtle colors that match each category’s logo. 


In your text editor, click to the right of TR in the <IR> tag for the header row, press 
[Spacebar], then type BACOLOR="#C C8800" 

Including the BGCOLOR attribute in a <TR> tag sets the background color for all cells in 
that row. For the header row, Jaime selected the same color used in the Nomad Ltd logo at 
the top of the Web page. 


. Click to the right of TR in the <TR> tag for the row containing the Soccer Safari 


information, press [Spacebar], then type BECOLOR="#93DB50" 


For this row, Jaime selected a green color that matches the Athlete tour category logo. 


. Repeat Step 2 for the row containing the Basking in Baseball information 
. Click to the right of TR in the «TR» tag for the row containing the Viva Voce 


information, press [Spacebar], then type BECOLOR="#DB7093" 


The background color for this row is a shade of red that matches the associated category logo. 


. Repeat Step 4 for the row containing the Theater Troupe information 
. Click to the right of TR in the «TR» tag for the row containing the Country Escape 


information, press [Spacebar], then type BECOLOR="#8F 8FBD" 


This row will display a blue background that matches the Leisure tour category logo. 


. Repeat Step 6 for the row containing the Urban Oases information 
. Click to the right of the text BODY in the <BODY> tag, press [Spacebar], then type 


LINK="#000000" VLINK="#2F4F4F" ALINK="#2F4F4F" 


Jaime wants to make sure the link text is visible on the new background colors, so he 
changes the default link text color to black, and changes the color of previously viewed 
and active links to dark gray. Figure E-11 shows the completed code for the table row 
background and link text colors. 


Save your work, click the browser program button on the taskbar, then reload 


nomad-e.htm 

As shown in Figure E-12, the header row background is a light brown color that Jaime selected 
to match the corporate logo. The backgrounds for the other six rows match the colors in their 
associated tour category logos, allowing readers to easily identify which tours belong to each 
category. Jaime made sure the table text would remain legible by selecting light background 
shades that contrast with the default black font color. 


FIGURE E-11: Web document containing code for background and link colors 
<BODY LINK:'"8000000" ULINK="#2F4F4F™ ALINK=“#2F4F4F™> | 
<FONT FACE="arial, helvetica, sans serif"» Link color 
el in E E а attributes 
«IMG SRC-"images/nomad.gif" HEIGHT:"63" ШІОТН= "201" ALIGN="left” USPACE="20 
HSPRCE:"20" ALT= “Nomad Ltd"? added to 
KH2>A guide to</H2> 
KHI1»Nomad Ltd Tourec/HI? <BODY> tag 
<TABLE BORDER CELLSPACING:"0"» 
<TR BGCOLOR- "HCC8800"» 

< 

< 

«TipLength «TD»9 days 

«THp Theme «TD»Baseball training camps 


AL 


<TR BGCOLQR= "#930850" > 
EF="construction.h 


asking in Baseball</A> 


BGCOLOR 
attribute 
added to each 
«TR» tag 


ALT: "Leisure"? 


</TR> 


<TR BGCOLOR="#DB7693"> 

<TD ROWSPAN="2"><IMG SRC-"images/arts.gif" WIDTH-"202" HEIGHT="121" 
T:"Rrts"» 

<Т0><й HREF-:"construction.htm"»Uiua Uocec/R» 

<TD>1S days 

«TD»Famous operahouses 
</TR> 


<TR BGCOLOR: "HDBT093"» 
<TD><A HREF="construction.htm">Theater Troupe</A> 
€«TD59 days 
<TD>Country theater festivals 

</TR> 


«TR BGCOLOR- "H8F8FBD"» 
«TD ROWSPAN="2"><IMG SRC-:"images/leisure.gif" WIDTH="197" HEIGHT="124" 


<TD><A HREF*"construction.htm"»Country Escape</A> 
<Т0>8 days 
<TD>Retreats in the countryside 

</TR> 


<TR BGCOLOR="“#8FSFBD"> 


FIGURE E-12: Web page containing background colors 


ATHLETE 


Travel, relax, and play! 
Watch and take part 
in various sports. 


Arts 
Experience the world's 


traditional performing 
arts at their sources. 


Background colors 
assigned by row 


Background color shows 
through transparent 
section of each graphic 


Leisure 


Relax and rejuvenate 
on quiet trips to 
secluded retreats. 


10 Us, 
$ CX 


© 


Adding а background i image to a table | 


in addition to the BGCOLOR attribute, Internet Explorer. 
- and the most recent versions of Navigator support the . 
BACKGROUND attribute for the <TABLE>, <TH >, and 
<TD> tags. The BACKGROUND attribute allows you (0 · 
specify a background image for the table or for specific _ 
.. table cells, as shown in Figure E-13. The «TR» tag does 
‘not шон this attribute, so (dm can't m ыш 


' пик. Web 2 table ue ашыш anis. m 


Unclicked link text 
appears in black 


| images row-by-row. The BACKGROUND attribute is isnot ' 
supported for any table tags in most versions of © 
Navigator. Therefore, you should implement this 
attribute only if you are certain that everyone using your 
page will view it with Internet Explorer or one of the 
most recent Navigator versions, or if the page's layout and . 
readability will not be compromised when the back- | 
pronn i ч ше пої appear i | 


[Jersey |high |5-7&. Іаму _ 7-101b. . . ]small/medium| 


| [Bush туре . Height Fruit maturity Yieldperbush|Berrysize — |Berries per cup| 
[Blue Ray high — |4-6 ft. | mid/late July 10-2016 [ире - 60 um 
Беш Jug кшм 7-101Ь_ Bun TER 


110 


10-201b > ‘[small/ medium 
15-20. 2 small: 5 


| = е пасоаа ЕТ 
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HTML 


users’ monitors, it's best to 
regularly view your page at 
different sizes and resolutions 
as you develop it, in order to 
catch any potential problems. 


Changing Table 


Dimensions 


As with other Web page elements, you can customize the dimensions of a table and of table cells 
using the HEIGHT and WIDTH attributes. The <TABLE>, <TH>, and <TD> tags support these 
attributes for setting minimum dimensions in pixels. In addition, these attributes allow measure- 
ments in percentages. For the <TABLE> tag, the browser calculates these dimensions as a percent- 
age of the browser window size. For example, «TABLE WIDTH=“90%”> widens the table, if 
necessary, to occupy 9096 of the width of the user's browser window. The browser bases percentage 
dimensions for the «TH» and <TD> tags on the size of the table; the code <TD HEIGHT=“10%”> 
causes the browser to make the cell taller, if necessary, so it takes up 1096 of the overall height of the 
table. Because all the cells in a row will display at the same height, and all the cells in a column will 
display at the same width, you need to specify height or width for only one cell in order to change 
the dimension for the entire row or column. The «TABLE» tag supports one other attribute that 
affects table and cell dimensions: CELLPADDING. This attribute sets a cushion of blank space 
around the contents of every cell; that space is one pixel wide by default. Adding CELLPADDING 
usually increases the height and width of cells because they have to accommodate the blank padding 
space, in addition to the existing cell contents. Table E-4 summarizes the attributes for changing 
table dimensions. (eese Jaime wants to test the effect of setting the table's width to a percentage 
of screen size. He also wants to make the table contents easier to read by adding cellpadding. 


1. In your text editor, click to the right of the text TABLE in the «TABLE» tag, press 
[Spacebar], then type WIDTH="100%" 


Jaime wants to see how the page layout looks if the table always occupies the entire width 
of the window. 


2. Save your work, click the browser program button on the taskbar, then reload 
Because of differences in nomad-e.htm 


Figure E-14 shows the table, including the WIDTH attribute. Figure E-15 shows the page 
on a large, high-resolution monitor, where the table is noticeably widened to take up more 
horizontal distance. The table cells include more empty space to make up the extra width. 


3. In your text editor, select the text WIDTH="100%" in the <TABLE> tag, press [Delete], 


then, if necessary, press [Delete] again to remove the extra space 

Although he liked the effect of the WIDTH setting on the computer monitor at his desk, 
Jaime views the table with the new WIDTH setting at different screen sizes and resolutions 
and finds that the setting can detract from the page layout on large, high-resolution screens. 
Jaime decides that the Web page layout would look best to the widest possible audience if he 
positions the table at the default left-aligned position in the window. 


4. Click to the right of the text TABLE in the «TABLE» tag, press [Spacebar], then 
type CELLPADDING- "5" 


5. Save your work, click the browser program button on the taskbar, then reload 


nomad-e.htm 
As shown in Figure E-16, the cell contents are surrounded by five pixels of space on all four 
sides. Jaime thinks this change makes the table contents easier to read. 


FIGURE E-14: Weh page table with WIDTH attribute ~] 


Table extends to right border, 


Travel, relax, and play! occupying full width of browser 
komen a window 


Experience the world's 
traditional performing 
their sources. 


Relax and rejuvenate 
оп quiet trips to 
secluded retreats. 


FIGURE E-15: Web page table with WIDTH attribute on large, high-resolution display 


ATHLETE 


Travel, relax, and play! 
Watch and take part 
in various sports. 


Cells include extra blank space 
in order to widen table 


Removal of 
CELLPADDING | 
attribute adds ша pen 
space restores empty 
between cell marsin 
contents and 
Experience the world" 
cell borders traditional performing 
Relax and rejuvenate 
оп quiet trips to 
secluded retreats. 
TABLE E-4: Table dimension attributes 
tag(s) | attribute | valid options | function 
<TABLE> WIDTH value in pixels specifies fixed width of table 
percentage specifies width of table as a percentage of browser window width 
HEIGHT value in pixels specifies fixed height of table 
percentage specifies height of table as a percentage of browser window height 
CELLPADDING value in pixels specifies thickness of empty zone surrounding contents of each cell 
<TH> and <TD> WIDTH value in pixels specifies fixed width of cell, and applies to entire column 
percentage specifies width of cell as a percentage of table width 
HEIGHT value in pixels specifies fixed height of cell, and applies to entire row 
percentage specifies height of cell as a percentage of table height 
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HTML 


You can add the ALIGN and 
VALIGN attributes to a <TR> 
tag to set the alignment for 
an entire row. 


Aligning Table 


Contents 


As when setting table backgrounds and dimensions, customizing the horizontal alignment of a 
table and its contents uses an attribute common to many Web page elements—the ALIGN 
attribute. While the ALIGN value in the <TR>, <TH>, and <TD> tags determines the alignment 
of row or cell contents within the cell borders, the ALIGN setting in the <TABLE> tag affects the 
horizontal alignment of the table as a whole within the Web page. The row and cell tags also sup- 
port a second alignment attribute: VALIGN. This attribute determines the position of cell contents 
relative to the top and bottom borders. You can align cell contents flush with the top or bottom 
border, or center the contents between the two borders. Table E-5 explains the two alignment 
attributes for tables, and includes their permitted values. Ges By default, all table contents are 
vertically centered and, except for header cells, aligned with the left edge of the cell. These defaults 
work well for all of the data in Jaime's table except the graphics, which would look better if centered 
horizontally. He also wants to experiment with the table's alignment within the page. 


1. In your text editor, click to the right of the word TABLE in the <TABLE> tag, press 


[Spacebar], then type ALIGN="center" 
The ALIGN attribute in the <TABLE> tag sets the table’s horizontal alignment within the 
browser window. 


2. Locate the <ID> tag for the cell containing the graphic athlete.gif, click to the right 
of TD, press [Spacebar], then type ALIGN="center" 


3. Locate the <ID> tag for the cell containing the graphic arts.gif, click to the right of 
TD, press [Spacebar], then type ALIGN="center" 


4. Locate the <ID> tag for the cell containing the graphic leisure.gif, click to the right 
of TD, press [Spacebar], then type ALIGN="center" 


Your Web document should resemble the one shown in Figure E-17. 


3. Save your work, click the browser program button on the taskbar, then reload 
nomad-e.htm 
As Figure E-18 shows, the table is centered between the left and right edges of the browser 
window. Each of the logo graphics also is centered between its left and right cell borders. 
Because each graphic fits its cell almost exactly, the effect is almost unnoticeable except for 
the Leisure logo. Depending on the size and resolution of your screen, the centered table may 
appear in a different part of the screen relative to the other page elements. 


6. In your text editor, select the text ALIGN="center" in the <TABLE> tag, press [Delete], 


then if necessary, press [Delete] again to remove the extra space 

After viewing the centered table at different screen sizes and resolutions, Jaime decides that 
the layout would look best with the table at the default left-aligned position in the window, 
to match the standardized left alignment of the heading section. 


7. Save your work, click the browser program button on the taskbar, then reload 
nomad-e.htm 


FIGURE E-17: Weh document containing alignment attributes for table and cell contents 
<H1>Nomad Ltd Tours</H1> 


<TABLE |ALIGN="“center”|CELLPADDING="5" BORDER CELLSPACING="0"> 
<TR Ы = 
<TH>Tour Category 


eine ALIGN attribute in 
<TH>Theme <TABLE> tag sets table 
</TR> жаз $ 
position in Web page 


<TR BGCOLOR="#93DB50"> 
<TD ALIGN="center” ROWSPAN="2"><IMG SRC-"images/athlete.gif" WIDTH="203" 
IHEIGHT="\116" ALT="athlete"> 
<TD>KA HREF="construction.htm">Soccer Safari</A> 


ms ip T and matches HEIGHT="121" ALT= "Arts”> 2 z 
</TR> <TD><A HREF="construction.htm”>Uiva Voce</A> 


<TD>15 days 
OR="#93DB50"> <TD>Famous operahouses 
HREF="construction.htm">Basking in Bag </TR> 


<TD>9 days 
<TD>Bageball training camps «TR BGCOLOR="#DB7093"> 
MAL <TD><A HREF*"construction.htm"»Theater Troupe</A> 
«TR BGCOLGR="#DB7093"> <Т0>9 days | 
<TD RLIGN:"center" ROWSPAN="2"><IMG SRC="imad <TD>Country theater festivals 
HEIGHT: “\ALT="arts"> </TR> 


<TR BGCOLOR="#8F8FBD"> 


: <TD RLIGN-"center" ROWSPAN="2"><IMG SRC-"images/leisure.gif" WIDTH="197" 
ALIGN attributes HEIGHT="124" ALT= "Leisure"> 
in «TD» tags set <TD><A HREF="construction.htm">Country Escape</A> 
it] <TD>8 days 
position of cell <TD>Retreats in the countryside 
contents == 


FIGURE E-18: Weh page table centered in browser window and containing centered contents 


Blank space to left and 


right of table is equal ATHLETE 

Travel, relax, and play! 
Watch and take part 

in various sports. 


Logo graphics 
centered Art S 
horizontally Experience the world's 


traditional performing 


within cells arts at their sources. 


Leisure 


Relax and rejuvenate 
on quiet trips to 
secluded retreats. 


TABLE E-5: Table alignment attributes 


tag | attribute | function | valid options (default value) 
<TABLE> ALIGN sets horizontal position of table within (left), center, right 

browser window 
«TR» and <TD> ALIGN sets horizontal position of cell contents between (left), center, right 


left and right borders 


VALIGN sets vertical position of cell contents between top, (center), bottom 
top and bottom borders 


<TH> ALIGN sets horizontal position of cell contents between left, (center), right 
left and right borders 
VALIGN sets vertical position of cell contents between top, (center), bottom 


top and bottom borders 
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HTML 


of popular browsers support 
new protocols for placing 
elements, most Web page 
designers still prefer to use 
tables because virtually all 
browsers can display them. 


or between the browser 
window and the table, the 
<FONT> tag does not 


dimensions when sizing a 
table; the most reliable 
method is trial and error, 
until elements are posi- 
tioned as you want them. 


require </FONT> to close it. 


Positioning Page 
Elements 


Although tables were originally developed to display data in a grid, designers have found other 
innovative uses for them. One of the most popular uses of tables is to create layouts that HTML 
does not otherwise support. For example, basic HTML codes do not allow you to position ele- 
ments in specific locations in the window. However, by placing elements in a table that does not 
display any borders, and adding blank cells of fixed widths, you can position the table contents 
anywhere on the page. Gags Jaime wants to more precisely position the elements in the Web 


1. In your text editor, click in the blank line above the <IMG> tag for the graphic nomad.gif, 


Although most recent versions 


2. 


a 4. 


Because font attributes are 
not inherited between cells, 


> 6. 


No rules exist for calculating 


1. 


page's heading section. He decides to redo the section's layout using a borderless table. 


press [Enter], type <TABLE>, press [Enter], press [Spacebar] twice, then type <TR> 
When the BORDER attribute is absent from the <TABLE> tag, the table appears without 
table or cell borders. 


Click to the left of the <IMG> tag for the graphic nomad.gif, press [Spacebar] four times, 
type «TD», click to the right of the > at the end of the <IMG> tag, then press [Enter] 


. Press [Spacebar] four times, then type «TD» «FONT FACE="arial, helvetica, 


sans serif"> 
Jaime adds a «FONT» tag because a Web page's font settings do not affect the contents of a table. 


Click to the left of the «H2» tag, press [Spacebar] six times, click to the left of the H1» 
tag, then press [Spacebar] six times, click in the blank line below the «H1» heading, 
press [Spacebar] twice, type </TR>, press [Enter], type </TABLE>, then press [Enter] 


Figure E-19 shows the Web document containing the code for the borderless table. 


9. Save your work, click the browser program button on the taskbar, then reload 


nomad-e.htm 
The logo and headings appear almost exactly as they did without the table in place. 


In your text editor, click to the right of TD in the first «TD» tag for the new table, press 
[Spacebar], then type VALIGN="top" WIDTH="240" 


This code positions the cell contents—the logo graphic—flush with the top of the cell. It also 
makes the cell wider than the graphic, which adds space between the logo and the text. 


Locate the <IMG> tag for the graphic nomad.gif, select the text VSPACE="20" 


HSPACE="20", press [Delete], then, if necessary, press [Delete] again to remove the 


extra space 
Jaime wants the logo in the upper-left corner of the browser window. 


. Click to the right of TD in the <TD> tag for the headings, press [Spacebar], then type 


VALIGN="bottom" HEIGHT="140" ALIGN="center" 

This code aligns the cell contents flush with the bottom of the cell, and increases the cell 
height so it’s larger than the two headings. Jaime planned these settings so the top heading 
aligns with the middle of the logo. 


. save your work, click the browser program button on the taskbar, then reload 


nomad-e.htm 
As shown in Figure E-20, the logo graphic is in the upper-left corner of the window, and 
the headings are center- r-aligned with each other, but positioned t to the right of the logo. 
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FIGURE E-19: Web document containing code for borderless table 


<BODY LINK-'"H000000" ULINK="#2F4F4F" ALINK="#2F4F4F"> 
«FONT FACE=“arial, helvetica, sans serif"» 


<TABLE> 
Table code <TR> 
added to <TD><IMG SRC-"images/nomad.gif" HEIGHT="63" WIDTH="201" ALIGN="left" 
page heading USPACE="20" HSPACE="20" ALT="“Nomad Ltd"» 
elements <TD><FONT FACE="arial, helvetica, sans serif™> 


<H2>A guide to</H2> 
<H1>Nomad Ltd Tours</H1> 
</TR> 
</TABLE> 


<TABLE CELLPRDDING-"5" BORDER CELLSPACING="0"> 
«TD RCCOLnbpz"HCCc8200*"» 


FIGURE E-20: Weh page including borderless table 


Logo near А А 
7 Мааа апше a 
з within table 
ш Nomad Ltd Tours call ndi 
within 
browser 


window 


ATHLETE 
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р> Concepts Review | 


Name the function of each tag and attribute marked in Figure E-21. 
FIGURE E-21 1 2 


5 ic М= "2">< ; /athlete.gif" WIDTH="203" 


HEIGH 


Match each Web page feature with the tag or attribute you use to create it. 


7. Cell that spans multiple rows a. CELLPADDING 
8. Empty area around cell contents b. BGCOLOR 
9. Table header cell c. «TH» 
10. Background color d. <ТК>..</ТК> 
11. Table row e. <TD> 
12. Standard table data cell f. ROWSPAN 


Practice 


Select the best answer from the list of choices. 


13. Which one of the following attributes controls the gap between the borders of adjacent cells? 
a. ROWSPAN 
b. CELLPADDING 
c. VALIGN 
d. CELLSPACING 


14. Which one of the following attributes controls the vertical alignment of the cell contents? 
a. ROWSPAN 
b. CELLPADDING 
c. VALIGN 
d. CELLSPACING 


15. Which one of the following attributes creates a cell that spans multiple rows? 
a. ROWSPAN 
b. WIDTH 
c. VALIGN 
d. CELLSPACING 


16. A single horizontal line of data is called a 
a. Table. 
b. Row. 
c. Column. 
d. Cell. 


17. A single vertical line of data is called a 
a. Table. 
b. Row. 
c. Column. 
d. Cell. 


18. Which one of the following tags supports the CELLPADDING attribute? 
a. <TABLE> 
b. <TR> 
c. <TH> 
d. <TD> 


HTML | Practice 


19. Which one of the following tags marks the contents of a header cell? 
a. <TABLE> 
b. <TR> 
c. «IH» 
d. <TD> 
20. A percentage value for the WIDTH attribute in the <TABLE> tag specifies the width of the table as a percent- 
age of the 
a. Overall table width. 
b. Browser window width. 
c. Width of the widest column. 
d. Width of the left-most column. 


2 
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. A percentage value for the WIDTH attribute in a «TH» or «TD» tag specifies the width of the column as a 
percentage of the 
a. Overall table width. 
b. Browser window width. 
c. Width of the widest column. 
d. Width of the left-most column. 


B Skills Review 


1. Create a simple table. 

a. In your text editor, open the file HTM E-3.htm, then save it as a text document with the filename travel-e.htm. 

b. Replace the tag <!-- with "<TABLE BORDER>", then replace the //--> tag with "</TABLE>". 

c. Insert a blank line above the text "Destination", then insert two spaces and the «TR» tag on this line. 

d. Before the text "Destination" insert four spaces and the «TH» tag, then repeat for the text "Location". 

e. Insert a blank line below the text "Location", then insert two spaces and the closing «/TR» tag on this line. 

f. Insert a blank line above the first line beginning with «A HREF...>, then insert two spaces and the 
«TR» tag on this line. 

g. In the next line, insert four spaces and the <TD> tag before the <A> tag, then in the next line, insert four 
spaces and the <TD> tag before the text "California". 

h. Insert a blank line below the text "California", then insert two spaces and the </TR> tag. 

i. Repeat steps f through h for the remaining six sets of table row data. 

j. Save your work, start your Web browser, cancel any dial-up activities, then open the file travel-e.htm. 


N 


. Span rows. 
a. In your text editor, insert a line above the closing </TR> tag for the column heading section, then insert 
four spaces and type "<TH>Activity" on this line. 
b. Insert a blank line below the text “California” in the first data row, then insert four spaces and type 
"<TD ROWSPAN="3">Hiking" on this line. 
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Practice 


c. Insert a blank line below the text "California" in the fourth data row, then insert four spaces and type 
"<TD ROWSPAN="2">Swimming/Boating" on this line. 

d. Insert a blank line below the text "Utah" in the sixth data row, then insert four spaces and type 
"<TD ROWSPAN="2">Mountain biking" on this line. 

e. Save your file travel-e.htm as a text document, then reload travel-e.htm in your browser. 


. Format borders. 


a. In your text editor, add the CELLSPACING attribute with a value of "0" to the <TABLE> tag. 
b. Save your work, then reload travel-e.htm in your browser. 


. Modify table background. 


a. In your text editor, add the BGCOLOR attribute with a value of “#F5F5DC” to the «TABLE» tag. 
b. Add the BGCOLOR attribute with a value of “#8F8FBD” to the «TR» tag of the header row. 
c. Save your work, then reload travel-e.htm in your browser. 


. Change table dimensions. 


a. In your text editor, add the CELLPADDING attribute with a value of "5" to the «TABLE» tag. 
b. Save your work, then reload travel-e.htm in your browser. 


. Align table contents. 


a. In your text editor, add the ALIGN attribute with a value of "center" to the <TD> for the text "Hiking" in the 
first data row. 

b. Repeat step a for the cells containing the text “Swimming/Boating” in the fourth row, and the text "Mountain 
biking" in the sixth row. 

c. Save your work, then reload travel-e.htm in your browser. 


. Position page elements. 


a. In your text editor, insert a blank line above the <IMG> tag for the graphic nomad.gif, then enter the 
<TABLE> tag on this line. 

b. Insert a blank line below the «TABLE» tag, then insert two spaces and the «TR» tag on this line. 

. At the beginning of the line containing the <IMG> tag, insert four spaces followed by the <TD> tag, including 
the attributes VALIGN with a value of "top", and WIDTH with a value of "220". 

. At the beginning of the line starting with the «H2» tag, insert four spaces followed by the «TD» tag, 
including the attributes VALIGN with a value of "center", and HEIGHT with a value of "90". 

e. In the «FONT» tag to the right of the «H2» tag, add the FACE attribute with a value of "arial, helvetica, sans serif". 

f. Insert a blank line after the closing </H2> tag, insert two spaces and the closing </TR> tag, insert another 
blank line below it, then insert the </TABLE> tag. 

. Save your work, then reload travel-e.htm in your browser. 
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> Independent Challenges | 


ЖЯ. You have created a Web site for your computer consulting business, Star Dot Star. The site has already eee 
new customers, and you want to expand the site to include information that would be of interest to potential cus- 
tomers, as well as to your existing clients. You have created a list of troubleshooting suggestions for common computer 
problems, and decide to add a table containing this information to your Web site. 

To complete this independent challenge: 


a. Open the file HTM E-4.htm in your text editor, then save it as a text document with the filename sds-e.htm. 

b. Replace the <!-- and //--> tags with the opening and closing tags for a table, then format the enclosed 
contents as a simple table with the column headings “Problem” and “Possible solutions”. 

c. If there are "Possible solutions" that apply to more than one "Problem", span rows, if necessary. 

d. Start your Web browser, preview the table, and fix any errors, if necessary. 

e. Select one or more appropriate background colors, look up the hexadecimal codes in an HTML reference, and 
add the colors to the table. 

f. Make any other changes to the table layout that you feel are appropriate; at minimum, use two of the following: 
CELLPADDING, CELLSPACING, WIDTH, HEIGHT, or BORDER=“ value". 

g. If you have access to other computers with different monitor sizes and/or resolutions, use them to preview 
your Web page, then make layout changes, if necessary, so the table is attractive and usable when viewed 
on each monitor. 


Ф. You have been setting up the Web site for Metro Water, the local water department. Now that you know how to 
position page elements using borderless tables, you want to create an HTML document containing only the logo and 
main headings. The document will serve as a template for adding new pages to the Web site. 

To complete this independent challenge: 


a. Open the file HTM E-5.htm in your text editor and save it as mw-e.htm. 

b. Create a table with one row and two columns, containing the graphic in the first column and the two headings 
in the second column. 

c. Remove the spacing and alignment attributes from the image tag. 

d. Format the cell containing the headings so the text is centered over a wide area. 

e. Format the heading fonts to match the setting for the rest of the page. 

f. Start your Web browser, and preview the template, then make changes if necessary. 


J. At your video store, Film Clips, you maintain an HTML-based information system for customer use. You want to 
add a link on the opening page that opens a table of popular rentals and new releases. 
То complete this independent challenge: 


a. Sketch a table incorporating at least three columns with information about 10 recent video releases; use 
information on movies that you are familiar with, or create fictitious information. 

b. Start your text editor and create a basic Web page including the logo (fclogo.gif) and any headings and 
hyperlinks you think are appropriate, then save your file as fc-e.htm. 


Practice 


C. Create the table of films based on your sketch. 

d. Save your work, start your Web browser program to preview the page, then make corrections to the code, if necessary. 

e. Customize the table layout using, at minimum, three of the following attributes: BGCOLOR, CELLPADDING, 
CELLSPACING, WIDTH, HEIGHT, ог BORDER=“ value". 

f. Save and preview the page, then make final corrections if necessary. 


SM 
Q3 j , tables with gridlines, this is a relatively uncommon use of tables in Web pages. Instead, Web designers 
1) have found various uses of tables for layout, and use them frequently. Explore the HTML code of sev- 
- K eral documents on the Web to learn how tables are used in Web pages today. 


To complete this independent challenge: 


4. Nearly all Web sites today include tables. Although certain Web pages display information in 


Connect to the Internet and use your browser to open the home pages for three major, well-designed Web sites. These 

might include technology companies, search engines, media outlets, government sites, or colleges or universities, 

such as the following: 

hotwired.lycos.com/webmonkey/ 

www.sfsu.edu 

www.course.com 

If you have trouble locating three appropriate pages, go to www.course.com, navigate to the page for this book, 

click the link for the Student Online Companion, click the link for this unit, and use the links listed there as a 

starting point for your search. 

. After each Web page opens, click View, then click Source (or Page Source) in your browser to view the HTML code 
for the Web page. 

. Locate any borderless tables in the page. If the code is long, search for the tags by pressing [Ctrl][F] (Navigator) 
or selecting Search>Find (Internet Explorer), entering “<TABLE>”, and pressing [Enter]. 

. Compare the code and the Web page displayed in the browser to determine the function of the page’s table(s). 

Create a Web page with the name table-e.htm and implement a borderless table for one of the uses you identified. 
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>» Visual Workshop 


As part of your job at Touchstone Books, you've been setting up the store's Web site. Your latest plans include л, а 
table that shows the top-selling books sorted by category. Open the file HTM E-6.htm and save it as tsb-e.htm. Use 
your text editor to modify the document so it matches Figure E-22 when viewed in your browser. Use a structuring 
table for the image and headings, then add a second table to display the book information. 


FIGURE E-22 


Category Author Title 


Children's |Oppenheim I Wuv OO, Too! 

Fic [Агу _ 
Historical [Munoz 
How-to Jordan Classical Guitar in 5 Minutes a Day 
Non-fiction |Conrad How to be Your Child's Favorite Teacher 
Self-help (Wallach 

Technical |Reding and Vodnik |7MZ - Illustrated 


»-HTMLE-24 WORKING WITH TABLES 


